<template>
  <div>
    <h3>医保中心工作人员管理</h3>
    <!-- 新增工作人员按钮 -->
    <el-button type="primary" @click="openDialog(null)">新增工作人员</el-button>

    <!-- 工作人员信息表格 -->
    <el-table :data="staffList" style="width: 100%">
      <el-table-column prop="staffid" label="工作人员ID" width="150"></el-table-column>
      <el-table-column prop="name" label="姓名" width="150"></el-table-column>
      <el-table-column prop="position" label="岗位" width="150"></el-table-column>
      <el-table-column prop="department" label="部门" width="150"></el-table-column>
      <el-table-column prop="contactnumber" label="联系电话" width="200"></el-table-column>

      <el-table-column label="操作" width="180">
        <template v-slot="scope">
          <el-button size="small" type="primary" @click="openDialog(scope.row)">编辑</el-button>
          <el-button size="small" type="danger" @click="deleteStaff(scope.row.staffid)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 编辑/新增工作人员对话框 -->
    <el-dialog :title="dialogTitle" v-model="dialogVisible">
      <el-form :model="staffForm" label-width="100px">
        <el-form-item label="姓名">
          <el-input v-model="staffForm.name"></el-input>
        </el-form-item>
        <el-form-item label="岗位">
          <el-input v-model="staffForm.position"></el-input>
        </el-form-item>
        <el-form-item label="部门">
          <el-input v-model="staffForm.department"></el-input>
        </el-form-item>
        <el-form-item label="联系电话">
          <el-input v-model="staffForm.contactnumber"></el-input>
        </el-form-item>
      </el-form>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveStaff">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      staffList: [], // 存储工作人员列表
      staffForm: {
        staffid: '',
        name: '',
        position: '',
        department: '',
        contactnumber: ''
      },
      dialogVisible: false, // 控制对话框显示
      dialogTitle: '新增工作人员', // 对话框标题
      isEdit: false // 标识当前操作是新增还是编辑
    };
  },
  mounted() {
    this.fetchStaffList()
  },
  methods: {
    // 获取工作人员列表
    fetchStaffList() {
      axios.get('http://localhost:8081/medicalStaff/all')
          .then(response => {
            this.staffList = response.data
          })
          .catch(error => {
            console.error("Error fetching insured persons:", error);
          });
    },
    // 打开新增/编辑对话框
    openDialog(row) {
      if (row) {
        this.isEditing = true;
        this.dialogTitle = '编辑医保中心工作人员';
        this.staffForm = {...row};
      } else {
        this.isEditing = false;
        this.dialogTitle = '添加医保中心工作人员';
        this.resetForm();
      }
      this.dialogVisible = true;
    },
    // 重置表单
    resetForm() {
      this.staffForm = {
        staffid: '',
        name: '',
        position: '',
        department: '',
        contactnumber: ''
      };
    },
    // 保存工作人员信息（新增或编辑）
    saveStaff() {
      if (this.isEditing) {
        axios.put(`http://localhost:8081/medicalStaff/update`, this.staffForm)
            .then(() => {
              this.fetchStaffList();
              this.dialogVisible = false;
            })
            .catch(error => {
              console.error("Error updating insured person:", error);
            });
      } else {
        this.staffForm.staffid = this.fullClose(0, 10000)
        axios.post('http://localhost:8081/medicalStaff/add', this.staffForm)
            .then(() => {
              this.fetchStaffList();
              this.dialogVisible = false;
            })
            .catch(error => {
              console.error("Error adding insured person:", error);
            });
      }
    },
    fullClose(n,m) {
      let result = Math.random()*(m+1-n)+n;
      while(result>m) {
          result = Math.random()*(m+1-n)+n;
      }
      return result;
    },
    // 删除工作人员
    deleteStaff(staffid) {
      axios.delete(`http://localhost:8081/medicalStaff/delete/${staffid}`)
          .then(() => {
            this.fetchStaffList();
          })
          .catch(error => {
            console.error("Error deleting insured person:", error);
          });
    }
  }
};
</script>

<style scoped>
.el-button {
  margin-bottom: 20px;
}
</style>
